<template>
  <el-form :model="form">
    <el-from-item>
      <el-table :data="form.stations" align="center" stripe style="width: 100%">
        <el-table-column prop="id" label="充电桩编号" width="100"/>
        <el-table-column prop="date" label="最后服务日期" width="120"/>
        <el-table-column prop="all_serves" label="累计充电次数" width="120"/>
        <el-table-column prop="all_time" label="累计充电时长" width="120"/>
        <el-table-column prop="all_power" label="累计充电量" width="130"/>
        <el-table-column prop="all_power_fees" label="累计充电费用" width="130"/>
        <el-table-column prop="all_serve_fees" label="累计服务费用" width="120"/>
        <el-table-column prop="all_fees" label="累计总费用" width="100"/>
      </el-table>
    </el-from-item>
    <br>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">更新状态</el-button>
    </el-form-item>
  </el-form>

</template>

<script>
import axios from 'axios';

export default {
  name: 'DisplayReport',
  tabel: [],
  data() {
    return {
      form: {
        num: -1,
        reports_list: [],
      },
    };
  },
  methods: {
    onSubmit() {
      console.log(this.form);
      const path = '/api/admin/reports_list';
      axios.get(path)
        .then((res) => {
          this.form = res.data;
        })
        .catch((error) => {
          // eslint-disable-next-line no-alert
          alert('error');
          console.error(error);
        });
    },
  },
};
</script>

<style>
</style>
